<template>
	<div class="date">
		<div class="time">{{ dateTime.slice(11) }}</div>
		<div class="week m-l-5">
			<div>{{ dateTime.slice(0, 10) }}</div>
			<div>{{ week }}</div>
		</div>
	</div>
</template>

<script setup name="date">
import date from '@u/date'

let dateTime = ref(''),
	week = ref('')

dateTime.value = date(new Date(), 'yyyy.MM.DD hh:mm:ss') // 修改数据date
week.value = `星期${['日', '一', '二', '三', '四', '五', '六'][new Date().getDay()]} `
const timer = setInterval(() => {
	dateTime.value = date(new Date(), 'yyyy.MM.DD hh:mm:ss') // 修改数据date
	week.value = `星期${['日', '一', '二', '三', '四', '五', '六'][new Date().getDay()]} `
}, 1000)

onUnmounted(() => {
	if (timer) clearInterval(timer) // 在Vue实例销毁前，清除我们的定时器
})
</script>

<style lang="scss" scoped>
.date {
	height: 100%;
	display: flex;
	align-items: center;
	.time {
		color: #d5e3ff;
		font-size: 40px;
		font-weight: 700;
		line-height: 40px;
	}
	.week {
		color: #d5e3ff;
		font-size: 14px;
		font-weight: 700;
	}
}
</style>
